import { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import './index.less'

import navi_back from '@/resource/navi_back.png'
import navi_home from '@/resource/navi_home.png'
export default function NaviCapsule(props) {
    const [cap, setCap] = useState({})
    useEffect(() => {
        const { top, height, width } = Taro.getMenuButtonBoundingClientRect()
        setCap({
            height,
            top,
            width
        })

    }, [])
    return (
        <View className="naviback" style={{ top: cap.top + 'px', height: cap.height + 'px', width: cap.width + 'px', borderRadius: cap.height + 'px' }}>
            <Image src={navi_back} onClick={() => Taro.navigateBack()}></Image>
            <View></View>
            <Image src={navi_home} onClick={props.nobackhome ? null : () => Taro.switchTab({ url: '../../pages/index/index' })}></Image>
        </View>
    )
}